<template>
	<view class="box">
		<view class="notice-box">
			<!-- <up-image src="/static/image/merchant.png" :fade="true" duration="450"></up-image> -->
			<up-notice-bar :text="content" bgColor="#ff393c" fontSize="13" speed="50" color="#e2e2e2"></up-notice-bar>
		</view>
		<view class="logo-box">
				<image src="/static/image/logo.png" mode="aspectFit"		></image>
		</view>
		<!-- 绝对定位的按钮盒子 -->
		<view class="floating-btn-box">
			<view class="floating-btn" @click="login()">商家登录</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	import {
		merchantLogin
	} from "@/common/api.js"

	const content = ref('请使用微信登录');

	const isFirstLogin = ref("false")

	const login = () => {
		uni.login({
			provider: 'weixin',
			success: (loginRes) => {
				
				merchantLogin(loginRes.code).then((res) => {
					console.log(res);
					if (res.code === 200) {
						isFirstLogin.value = res.data.isFirstLogin;
						// 将merchantId和token存到本地
						uni.setStorage({
							key: 'merchantId',
							data: res.data.merchantId,
						});
						uni.setStorage({
							key: 'token',
							data: res.data.token,
						});
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						uni.navigateTo({
							url: `/pages/merchant_index/merchant_index?isFirstLogin=${isFirstLogin.value}`,
						})
					} else {
						// 清空token和merchantId
						uni.removeStorageSync('merchantId');
						uni.removeStorageSync('token');
					}
				});
				
				
				
				
				console.log(111);
				
				
				
				
			},
			fail: () => showError('微信登录失败，请重试'),
		});
	}
</script>

<style scoped lang="scss">
	.box {
		height: 100vh;
		width: 100vw;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
		background: linear-gradient(to bottom, #ff7f7f, #ffd3d3); // 背景渐变色
	}

	.notice-box {
		position: absolute;
		top: 5%;
		left: 50%;
		transform: translateX(-50%); // 水平居中
		width: 80%;
		max-width: 600rpx;

	}
	
	.logo-box{
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translateX(-50%); // 水平居中
		// width: 80%;
		// max-width: 600rpx;
	}

	.floating-btn-box {
		position: absolute;
		bottom: 20%;
		left: 50%;
		transform: translateX(-50%); // 水平居中
		width: 80%;
		max-width: 600rpx;
	}

	.floating-btn {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #c31432, #e74c3c); // 按钮渐变色
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		border-radius: 60rpx; // 圆角
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3); // 阴影效果
		cursor: pointer;
		transition: all 0.3s ease; // 过渡动画
	}

	.floating-btn:hover {
		transform: scale(1.05); // 悬停时放大
		box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.4); // 悬停时阴影加深
	}
</style>